<template>
    <header class="app-header">
      <!-- logo -->
      <a class="logo" href="#">
        <i class="iconfont Navbar_logo"></i>
      </a>
      <!-- 搜索 -->
      <a class="search" href="#">
        <i class="iconfont ic_search_tab"></i>
      </a>
  
      <!-- 头像 -->
      <a class="face" href="#">
        <img  src="@/assets/images/login.png" alt="" />
      </a>
      <!-- 下载按钮 -->
      <div class="down-app">
        <a>下载app</a>
      </div>
    </header>
  </template>

<script setup lang="ts">

</script>
<style lang="scss" scoped>
.app-header {
  display: flex;
  align-items: center;
  padding: 2vw 3vw;
  background-color: #fff;
}
.logo {
  flex: 1;
  .Navbar_logo {
    color: #fb7299;
    font-size: 7.46667vw;
  }
}
.search {
  padding: 2 2vw;
  .ic_search_tab {
    color: #ccc;
    font-size: 5.86667vw;
  }
}
.face {
  padding: 0 4vw;
  img {
    width: 6.4vw;
  }
}
.down-app {
  font-size: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fb7299;
  color: #fff;
  border-radius: 5px;
  padding: 5px 10px;
}</style>